<template>
  <div id="PieDevicetype"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  LegendComponent,
  GraphicComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'PieDevicetype',
  data () {
    return {
      myChart: null,
      // 数据
      simdata: [
        {
          name: '感烟探测器',
          value: 407
        },
        {
          name: '烟感报警器',
          value: 350
        },
        {
          name: '点型感烟探测器',
          value: 298
        },
        {
          name: '消火栓按钮',
          value: 209
        },
        {
          name: '火灾声光报警器',
          value: 121
        },
        {
          name: '手动按钮',
          value: 118
        },
        {
          name: '手动按钮',
          value: 118
        },
        {
          name: '点型感温探测器',
          value: 200
        },
        {
          name: '层号灯',
          value: 50
        },
        {
          name: '强切',
          value: 80
        },
        {
          name: '应急照明',
          value: 100
        },
        {
          name: '强制手动按钮',
          value: 60
        },
        {
          name: '讯响器',
          value: 20
        },
        {
          name: '常开防火门',
          value: 40
        },
        {
          name: '信号碟阀',
          value: 55
        },
        {
          name: '排烟阀',
          value: 68
        },
        {
          name: '水流指示器',
          value: 40
        },
        {
          name: '消防广播',
          value: 23
        },
        {
          name: '电梯',
          value: 50
        },
        {
          name: '压力开关',
          value: 80
        },
        {
          name: '新风机',
          value: 40
        },
        {
          name: '卷帘门',
          value: 63
        },
        {
          name: '防火阀',
          value: 50
        },
        {
          name: '消防电源',
          value: 40
        },
        {
          name: '照明配电',
          value: 23
        },
        {
          name: '液位传感器',
          value: 74
        },
        {
          name: '雨淋阀',
          value: 65
        },
        {
          name: '点型感电探测器',
          value: 55
        },
        {
          name: '火灾报警控制器',
          value: 85
        },
        {
          name: '点型感通探测器',
          value: 90
        }
      ],
      // 总数
      percent: null
    }
  },
  created () {
    echarts.use([
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer,
      LabelLayout,
      GraphicComponent
    ])
  },
  mounted () {
    // 计算中间设备总数
    this.percent = this.simdata.reduce((total, obj) => {
      return total + obj.value
    }, 0)
    // 找到这个容器
    this.myChart = echarts.init(this.$el)
    // 配置项
    const that = this
    let option = {
      // 鼠标移入上面时候-提示框组件
      tooltip: {
        trigger: 'item'
      },
      // 工具箱-下载
      toolbox: {
        // 下载图标字体颜色
        iconStyle: {
          // 字体背景颜色
          // color: '#0543fe',
          // borderColor: "#6a6da9"
          // 字体边框颜色
          borderColor: '#94d6da'
          // backgroundColor
        },
        feature: {
          saveAsImage: {
            show: true //是否显示该工具。
            // type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
            // name: '消防用水系统监测', //保存的文件名称，默认使用 title.text 作为名称
            // backgroundColor: '#01398e', //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
            // title: '下载图片',
            // pixelRatio: 1
          }
        }
      },
      // 实例title
      legend: {
        type: 'scroll',
        pageIconInactiveColor: '#fff',
        pageTextStyle: {
          color: '#fff'
        },
        pageIconColor: '#fff',
        data: this.simdata,
        right: 35,
        top: 0,
        orient: 'vertical',
        textStyle: {
          color: '#fff',
          fontSize: 14,
          lineHeight: 25
        },
        icon: 'circle',
        // padding: [10, 20, 10, 40],
        padding: [10, 0, 10, 0],
        formatter: function (params) {
          var target
          that.simdata.forEach(v => {
            if ((v.name = params)) target = v.value
          })

          return `${params}  ${target} `

          //文字长度超出8个字换行
          //   var strlength = params.length
          //   if (strlength % 8 != 0) {
          //     params = params.replace(/\S{8}/g, function (match) {
          //       return match + '\n'
          //     })
          //   } else {
          //     params = params.replace(/\S{8}/g, function (match) {
          //       return match + '\n'
          //     })
          //     strlength = params.length
          //     params = params.substring(0, strlength - 1)
          //   }
          //   return `${params} ${target}`
        }
      },
      graphic: [
        {
          type: 'image',
          id: 'logo',
          left: 43,
          top: 17,
          z: 0,
          //   bounding: 'raw',
          style: {
            image:
              'https://img.thgykj.com/thgy-file/323d795d050140e7b2245d5f7a33baf01697246047313.png',
            width: 220,
            height: 220
          }
        }
      ],
      series: [
        {
          name: '设备类型',
          type: 'pie',
          // 饼图半径
          radius: ['50%', '70%'],
          // 相对于父容器比例
          center: ['30%', '50%'],
          color: [
            '#F2B949',
            '#59F7CA',
            '#FDFDFD',
            '#FF3C3C',
            '#FF7979',
            '#62F2F8',
            '#81C4E4',
            '#A0FFE4',
            '#477BFF',
            '#FFF06A',
            '#,27B9FF',
            '#FFA0FB',
            '#FF8947',
            '#9AFF6A',
            '#0066FF',
            '#A6D4FF',
            '#73FF81',
            '#FDFF92',
            '#7000FF',
            '#FF3CEB',
            '#ffffff'
          ],
          // 防止标签间的重叠-默认开启true
          avoidLabelOverlap: false,
          itemStyle: {
            //borderRadius: 10,
            borderColor: 'rgba(2,29,159,0.7)',
            borderWidth: 2
          },
          // 数据名称-静态
          label: {
            show: false,
            position: 'center',
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#FEFEFF',
            formatter:
              '{active|总设备数量}' + '\n\r' + '{total|' + this.percent + '}',
            rich: {
              total: {
                fontSize: 24,
                color: '#FEFEFF'
              },
              active: {
                fontSize: 14,
                color: '#9BB7D4',
                lineHeight: 30
              }
            }
          },
          // 选中图标-标题样式-静态
          emphasis: {},
          // 引导线
          labelLine: {
            length: 15,
            length2: 80
          },
          data: this.simdata
        }
      ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
#PieDevicetype {
  width: 100%;
  height: 100%;
}
</style>
